import React, { useEffect, useState, useMemo, startTransition } from 'react'
import "../css/order.css"
import axios from 'axios'
import { useNavigate } from 'react-router-dom'
import { Toast } from 'antd-mobile'

export default function Order(props) {
  const navigate = useNavigate()

  const [status, setStatus] = useState(props.status)

  // const item = [
  //   { _id: '1', status: '待付款', shop: 'OMINI顶置', img: 'https://img0.baidu.com/it/u=1868041727,2468851169&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1728925200&t=3e6ae28cc9a20681467f6760f713baf6', name: '【新品】2023新款女鞋夏季高跟鞋细跟尖头单鞋', price: '399', num: '1', color: '黑色', size: '100cm' },
  //   { _id: '2', status: '待发货', shop: 'omini顶置', img: 'https://img0.baidu.com/it/u=1868041727,2468851169&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1728925200&t=3e6ae28cc9a20681467f6760f713baf6', name: '【新品】2023新款女鞋夏季高跟鞋细跟尖头单鞋', price: '399', num: '1', color: '黑色', size: '100cm' },
  //   { _id: '3', status: '待收货', shop: 'omini顶置', img: 'https://img0.baidu.com/it/u=1868041727,2468851169&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1728925200&t=3e6ae28cc9a20681467f6760f713baf6', name: '【新品】2023新款女鞋夏季高跟鞋细跟尖头单鞋', price: '399', num: '1', color: '黑色', size: '100cm' },
  //   { _id: '4', status: '待评价', shop: 'omini顶置', img: 'https://img0.baidu.com/it/u=1868041727,2468851169&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1728925200&t=3e6ae28cc9a20681467f6760f713baf6', name: '【新品】2023新款女鞋夏季高跟鞋细跟尖头单鞋', price: '399', num: '1', color: '黑色', size: '100cm' },
  //   { _id: '5', status: '待付款', shop: 'omini顶置', img: 'https://img0.baidu.com/it/u=1868041727,2468851169&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1728925200&t=3e6ae28cc9a20681467f6760f713baf6', name: '【新品】2023新款女鞋夏季高跟鞋细跟尖头单鞋', price: '399', num: '1', color: '黑色', size: '100cm' },
  // ]
  const [item, setitem] = useState([])
  const getgoodcar = () => {
    axios.get('/cxb/getgoodcar').then(res => {
      if(res.data.code === 200) {
        setitem(res.data.data)
      }
    })
  }
  const delgoodcar = (id) => {
    axios.delete(`/cxb/delgoodcar?_id=${id}`).then(res => {
      if(res.data.code === 200) {
        getgoodcar()
      }
    })
  }
  const compute = useMemo(() => {
    switch (status) {
      case '全部':
        return item;
      case '待付款':
        return item.filter(i => i.having === '待付款');
      case '待发货':
        return item.filter(i => i.having === '待发货');
      case '待收货':
        return item.filter(i => i.having === '待收货');
      case '待评价':
        return item.filter(i => i.having === '待评价');
      default:
        return [];
    }
  }, [status, item]);
  useEffect(() => {
    setStatus(props.status)
    getgoodcar()
  }, [props.status])
  useEffect(() => {
    getgoodcar()
  }, [])
  return (
    <div className='cxb_myorder_order'>
      {compute.map(i => {
        return <div key={i._id} className='cxb_myorder_order_item'>
          <div className='cxb_myorder_order_item_top'>
            <span>{i.shop}</span>
            <p>{i.status}</p>
          </div>
          <div className='cxb_myorder_order_item_content'>
            <img src={i.img} alt='' style={{width: '12rem', height: '12rem', borderRadius: '0.5rem'}} />
            <p style={{width:'19rem'}}>
              <span style={{fontSize: '1.5rem',fontFamily:'Microsoft YaHei'}}>{i.name}</span>
              <p style={{color:'#b59ba6',marginTop:'1rem'}}>{i.color} 【{i.size}】</p>
            </p>
            <span style={{width: '4rem',textAlign:'right',color:'#b59ba6'}}>
              <span style={{fontSize:'1.8rem'}}>{i.price}</span>
              <p>×{i.num}</p>
            </span>
          </div>
          <div className='cxb_myorder_order_item_bottom'>
            <span>共{i.num}件商品</span>
            <p>合计：{i.price * i.num}</p>
          </div>
          {i.having === '待付款'&&<div className='cxb_myorder_order_item_btn'>
            <button>联系商家</button>
            <button onClick={()=>{
              delgoodcar(i._id)
            }}>取消订单</button>
            <button style={{color:'red', border: '1px solid red'}}>付款</button>
          </div>}
          {i.having === '待发货'&&<div className='cxb_myorder_order_item_btn'>
            <button>申请退款</button>
            <button onClick={()=>{
              Toast.show('提醒成功')
            }} style={{color:'red', border: '1px solid red'}}>提醒发货</button>
          </div>}
          {i.having === '待收货'&&<div className='cxb_myorder_order_item_btn'>
            <button>申请售后</button>
            <button>查看物流</button>
            <button onClick={()=>{
              setTimeout(()=>{
                startTransition(()=>{
                  navigate('/setComment')
                })
              },1000)
            }} style={{color:'red', border: '1px solid red'}}>确认收货</button>
          </div>}
          {i.having === '待评价'&&<div className='cxb_myorder_order_item_btn'>
            <button>申请售后</button>
            <button onClick={()=>{
              sessionStorage.setItem('shopId',i.gid)
              sessionStorage.setItem('userId',i.uid)
              startTransition(()=>{
                navigate('/setComment')
              })
            }} style={{color:'red', border: '1px solid red'}}>评价</button>
          </div>}
        </div>
      })}
    </div>
  )
}
